Create a Single Page Responsive Website Using Bootstrap |
您所在的位置：网站首页 › bootstrap single page template › Create a Single Page Responsive Website Using Bootstrap |
Create a Single Page Responsive Website Using Bootstrap
|
Everyone wants to create the website which is compatible with all the devices like computer, laptops, tablets, and mobiles. So for making a website responsive the best way is to make a website using Bootstrap. Since it is a single-page website when you click on any menu on the website it will reach you towards a specific section. Code Implementation: HTML Code: In the HTML code, you have to copy the starter template from the bootstrap and just paste it into your HTML file. After that create a navbar. Then you just have to use the grid system of bootstrap, and you will be able to create a simple and responsive website like this. index.html GFG Geeks for Geeks Home Services About Us Products Contact Us BEST PROFESSIONAL WEBSITE DESIGN SOFTWARE DEVELOPMENT COMPANY The fastest way to grow your business with the leader in Technology Contact Us SERVICES Website Design User Experience Design. Website Content Strategy. Cross Browser and Platform Testing. Bulk SMS 1.Toll Free Number 2. IVR 3. Virtual Number 4. Political or any Voice Broadcasting Payment Gateways PayU India is the flagship company of Naspers group which is a $25 Billion internet and media conglomerate listed on London and Johannesburg stock exchanges respectively. About Us Why Us Probuz is all about Delivering High Quality web design and development services, Cost effective and reliable solutions. SCHOOL/COLLEGE MANAGEMENT SOFTWARE (CAMPUS PRO) Let us take care of your Business needs. Customer Productivity is our Priority. Our expertise in Business includes Our Products Product List CLINIC MANAGMENT SYSTEM SCHOOL/COLLEGE MANAGEMENT SOFTWARE (CAMPUS PRO) SERVICE MANAGEMENT SOFTWARE E-COMMERCE WEBSITE Get In Touch My Website At XYZ we believe that customers should always get easy-to-use, best in the kind and fast services.xyz has achieved standards which helps customer to achieve satisfaction and realize value for their hard earned money. Contact Us Call Us- 1800-121-6532 Email Us- [email protected] Subscribe To Newsletter We'll never share your email with anyone else. SubmitCSS CODE: So, as you all know that bootstrap is not enough good for making the website interactive, so added some CSS over here. You can change the navbar background color according to your requirement. style.css*{ margin: 0; padding: 0; font-family: 'Roboto Condensed', sans-serif;} /* navbar */ .navbar-nav{ margin-right: 0 !important; padding-right: 100px;} .navbar{ background-color: #0a193d; color: white !important;} .nav-item a{ color: white !important;} .nav-item{ padding-left: 2px;} .navbar-brand{ color: white !important; padding-left: 100px;} #navbar button{ color: white !important;} /* banner */ #banner-container{ background-color: #0a193d; color: white !important; padding-top: 80px; padding-bottom: 80px; } #banner-row img{ max-width: 70%; height: auto; display: block; padding-left: 30px;} #banner-row h3, p{ padding-left: 20px; padding-top: 20px; text-align: center;} #banner-row a{ background-color: white !important; color: black !important; border: none; margin-left: 20px; margin-top: 20px; }#banner-col{ padding-left: 20px;}/* service */#service{ padding-top: 80px; padding-bottom: 80px;} #service h1{ padding-bottom: 70px;} /* about */ #about{ padding-top: 80px; padding-bottom: 80px;} #about h1{ padding-bottom: 70px;} #about-col ul{ padding-top: 50px; padding-left: 50px;} #about-col ul li{ padding-top: 15px; } /* product */ #product{ padding-top: 80px; padding-bottom: 80px;} #product h1{ padding-bottom: 70px;} #product-col2 ul{ padding-top: 90px;} #product-col2 ul li{ padding-top: 15px;} /* social */ #social{ padding-top: 80px; padding-bottom: 80px;} #social h1{ padding-bottom: 70px;} .social-col a:hover img{ transform: translateY(-10px);} #social-row{ flex-direction: row;} /* footer */ .mb-3{ padding-top: 10px;} /* media */@media only screen and (max-width: 987px){ .navbar-brand{ padding-left: 0px; }} @media only screen and (max-width: 768px){ #banner-row img{ padding-top: 20px; } .social-col{ width: 33%; } }Output:
Supported Browser: Google ChromeMicrosoft EdgeFirefoxOperaSafariYou can check out this project at the given link – https://saurabhsonewane.github.io/gfg1.github.io/ My Personal Notes arrow_drop_up |
【本文地址】